<template>
    <div class="execute">
        <component-table/>

        <vue-flow-canvas>
            <template #buttonGroup>
                <!--按钮组-->
                <n-space class="vue-flow-buttons">
                    <n-button size="large" @click="elements.emptiedElements" strong round type="warning">
                        清空画布
                    </n-button>
                    <n-button size="large" @click="updateElements(true)" strong round type="primary">
                        返回存档
                    </n-button>
                    <n-button size="large" @click="saveVueFlow" strong round type="primary">
                        保存存档
                    </n-button>
                    <n-button size="large" @click="submittedBefore" strong round type="primary"
                              :disabled="disallowSubmit">
                        提交执行任务
                    </n-button>
                </n-space>
            </template>
        </vue-flow-canvas>
        <!--提交总结-->
        <n-modal v-model:show="showModal">
            <n-card
                style="width: 600px"
                title="提交总结"
                :bordered="false"
                size="huge"
                role="dialog"
                aria-modal="true"
            >
                <n-input type="textarea" v-model:value="summary"
                         placeholder="做了这么多工作, 有什么想总结的吗? 没有感悟也可以问候一下老师 ^v^ "/>
                <template #footer>
                    <n-button @click="submitted" :disabled="summary===null">交作业</n-button>
                </template>
            </n-card>
        </n-modal>
    </div>
</template>

<script setup>
import {useStudentStore} from "@/stores/student";
import {useRoute} from "vue-router";

import ComponentTable from "@/components/VueFlowModel/vueFlowTable/ComponentTable.vue";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import VueFlowCanvas from "@/components/VueFlowModel/Compositions/VueFlowCanvas.vue";

const student = useStudentStore()
const elements = useElementsStore()
const route = useRoute()
student.setMenuValue(route.name)
/**
 *  从服务器获取节点数据
 * */
const updateElements = (mandatory = false) => {
    if (mandatory) {
        window.$dialog.info({
            title: '返回存档',
            content: '返回上次存档将不保留本次操作',
            positiveText: '确定',
            negativeText: '不确定',
            onPositiveClick: () => {
                window.$message.info('人生不能重来,但是我可以,请记得保存哦')
                elements.updateElements(route.query.projectId, route.query.taskId, mandatory);
            },
            onNegativeClick: () => {
                window.$message.success('还好没回档, 不然刚刚的工作白费了')
            }
        })
    } else {
        elements.updateElements(route.query.projectId, route.query.taskId, mandatory);
    }
}
updateElements()

// 保存
const saveVueFlow = () => {
    elements.saveElement(route.query.projectId, route.query.taskId)
}
let automatic = ref(false)
workApi.post("/student/task", {
    training_id: +route.query.projectId,
    task_id: +route.query.taskId
}).then(r => {
    automatic.value = r.data.table_auto_scoring
})


const showModal = ref(false)
const summary = ref(null)

function submittedBefore() {

    let answerUuid = ""
    let pictureUuid = ""
    // 获取答案节点的上级节点
    for (let i of elements.elements) {
        if (i['targetHandle'] === "Score-inlet") {
            console.log(i)
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    answerUuid = j.id
                    break
                }
            }
        }
        if (i['targetHandle'] === "PictureScore-inlet") {
            console.log(i)
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    pictureUuid = j.id
                    break
                }
            }
        }
    }
    workApi.post("student/task_perform_check", {
        data: elements.elements,
        table_auto_scoring: student.taskState.auto_scoring,
        summary: summary.value,
        answerUuid,
        pictureUuid,
        training_id: +route.query.projectId,
        task_id: +route.query.taskId,
    }).then(r => {
        if (r.success) {

            showModal.value = true
        }else {
            window.$dialog.warning({
                title: '警告',
                content: r.msg,
                positiveText: '确定',
                negativeText: '不确定',
                onPositiveClick: () => {
                    showModal.value = true
                },
                onNegativeClick: () => {
                }
            })

        }
    })
}

const submitted = () => {
    let answerUuid = ""
    let pictureUuid = ""
    // 获取答案节点的上级节点
    for (let i of elements.elements) {
        if (i['targetHandle'] === "Score-inlet") {
            console.log(i)
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    answerUuid = j.id
                    break
                }
            }
        }
        if (i['targetHandle'] === "PictureScore-inlet") {
            console.log(i)
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    pictureUuid = j.id
                    break
                }
            }
        }
    }
    workApi.post("student/task_perform", {
        data: elements.elements,
        table_auto_scoring: student.taskState.auto_scoring,
        summary: summary.value,
        answerUuid,
        pictureUuid,
        training_id: +route.query.projectId,
        task_id: +route.query.taskId,
    }).then(r => {
        console.log(r)
    })
    showModal.value = false
}
const disallowSubmit = computed(() => {
    let number = 0;
    let pictureNumber = 0;
    for (let i of elements.elements) {
        if (i['targetHandle'] === "Score-inlet") {
            number++
        }
        if (i['targetHandle'] === "PictureScore-inlet") {
            pictureNumber++
        }
    }
    let rating_type = student.taskState.rating_type
    if (rating_type === "p") {
        number = 1
    }
    if (rating_type === 't') {
        pictureNumber = 1
    }

    return !(number === 1 && pictureNumber === 1);
})
</script>

<style scoped lang="less">
.execute {
    display: flex;
    height: 90vh;

    .component-table {
        flex: 1;
    }

    .vue-flow-canvas {
        flex: 5;
        background-color: #eeeeee;
    }
}
</style>